<extend name="desktop_default/template/base_index2" />

<block name="area_header">
	<style type="text/css">
		body {
			background-color: #f9f9f9;
		}
		.level .li .current {
            background: #ff5783;
        }

		.am-panel {
			width: 800px;
			margin-left: 28%;
			margin-top: 2%;
		}
		.dv font{margin-left: 100px;}
		.am-panel-hd {
			height: 80px;
			padding: 20px;
			background-color: #FFFFFF !important;
			text-align: center;
		}
		 .level .li span {
          width: 100%;
          display: table;
        }
		.level{margin-bottom: 0px; width:350px ;  }
		.am-form-set div{margin-top: 5px;
            position: relative;}
		 .level .li {  background: none repeat scroll 0 0 #eaeaea; color: #fff;display: inline;float: left;height: 18px;line-height: 18px; margin-right: 1px; text-align: center; width: 33%;
}
.container{height: 80px; background-color: white; width: 100%; min-width: 1100px;}
		.fm input{ height: 50px; width: 350px;}
		.tishi{font-size: 12px; color: darkgray; padding-left: 5px;}

        .fm .btn-code{

            position: absolute;
            top: 7px;
            right: 200px;
        }
	</style>
</block>

<block name="area_body">
    <header class="header">
	<include file="desktop_default/width/right" />
	<include file="desktop_default/width/top"/>
    </header>

    <div style="background: #FFFfff;margin-top: 30px;" class="shop-container">
		<img height="70px" style="margin-left: -3px; margin-top: -5px;" src="__IMG__/login.png">
		<font color="#8C8C8C">买东西必须注册哦!</font>
	</div>
	<div  class="shop-container" style="background-color: white; font-size: 14px; height: 630px;margin: 0 auto;">
	<div style="background-color: white; font-size: 14px; height: auto; width: 600px;  float:left; padding: 20px; padding-left: 40px;">

		<form class="fm" id="fm" action="" method="post">
			<fieldset class="am-form-set">
                <div class="js_mobile">
                    <input type="text"  class="am-form-field "  name="mobile" id="phone" placeholder="手机号码">&nbsp;
                    <span class="tishi">请填写正确的手机号码</span>
                </div>

                <div>
                    <input type="text"  class="am-form-field js_code"  name="code"  placeholder="验证码">
                    <a target-form="js_mobile" onclick="return checkMobile();" href="{:U('Shop/Index/getCode')}" data-no-refresh="1" data-loading-text="正在发送...." class=" btn-code no-refresh ajax-post am-btn am-btn-primary am-btn-sm">获取验证码<span class="j_count"></span></a>
                    <span class="tishi">请输入获取到的手机验证码</span>
                </div>
                <div>
                    <input  class="am-form-field"  type="password" name="pwd" id="pwd" placeholder="设个密码">&nbsp;<span><font class="tishi">密码不小于六位</font></span></div>
				<div class="level clearfix am-cf">
					<div class="101 li">
						<span class="ls1">危险</span>
					</div>
					<div class="102 li">
						<span class="ls2">适中</span>
					</div>
					<div class="103 li">
						<span class="ls3">安全</span>
					</div>
				</div>

                <br>

				<div style="margin-top: -2%;">
                    <input class="am-form-field"  type="password" name="pwd1" id="pwd1" placeholder="重复密码">&nbsp;
                    <span><font class="tishi">必须与密码一致</font></span>
                </div>

                <div>
                    <input type="text"  value="{$invite_id}" class="am-form-field" name="idcode" id="phone" placeholder="邀请人ID码(可不填)">&nbsp;
                    <span class="tishi">邀请人ID码(可不填)</span>
                </div>
            </fieldset>
				<button id="id" style="width: 350px; height: 40px;" url="{:U('Shop/Index/register')}" target-form="fm"  class="ajax-post btn btn-primary am-btn am-btn-danger am-btn-block" autofocus="autofocus">注册个性账号</button>
				<br><br><font color="black" size="2">已有账号？请<a href="{:U('Shop/Index/login')}">前往登录</a>斑马账号</font>
				<br><br><font size="2">点击注册即表示同意接受<a target="_blank" href="{:U('Shop/Index/xieyi')}">斑马协议和隐私策略</a></font>
		</form>
	</div>
	<div style="width:480px;height:600px;float:left;">
	<img style="margin-top: 120px;" src="__IMG__/zhuce.png">
	</div>
	</div>
	<br>

	 <include file="desktop_default/width/floor" />
	
</block>

<block name="area_footer">
    <script type="text/javascript">
        function checkMobile(){

            return false;
        }
	$(function(){
		
		$('#pwd').keyup(function() {
			if ($(this).val().length >= 6) {
				$('.ls1').addClass('current');
			} else {
				$('.ls1').removeClass('current');
			}
			if ($(this).val().length >= 8 && $(this).val().match(/\D/) != null) {
				$('.ls2').addClass('current');
			} else {
				$('.ls2').removeClass('current');
			}
			if ($(this).val().length >= 10 && $(this).val().match(/[`~!@#$%^&*_+<>{}\/'[\]]/im)) {
				$('.ls3').addClass('current');
			} else {
				$('.ls3').removeClass('current');
			}

			if ($(this).val().length > 16 || $(this).val().length < 6) {
				$(this).parent().find("span").html("<span class='am-text-danger'><i class='am-icon-times'></i>密码长度必须大于6且不超过16位！</span>");
			} else {
				$(this).parent().find("span").html("<span class='am-text-success' ><i class='am-icon-check'></i>密码可用！</span>");
			}
		})


		$('#pwd1').blur(function(){
			var pwd=$('#pwd').val();
			if($(this).val()==pwd){
				$(this).parent().find("span").html("<span  class='am-text-success'><i class='am-icon-check'></i>正确！</span>");

			}else{
				$(this).parent().find("span").html("<span  class='am-text-danger'><i class='am-icon-times'></i>两次输入的密码不一致！</span>");
			}
		})
		var isMobile = /^1\d{10}$/;
		$('#phone').keyup(function() {
			if (!isMobile.test($(this).val())) {
				$(this).parent().find("span").html("<span class='am-text-danger' ><i class='am-icon-times'></i>手机号码格式不正确！</span>");
			} else {
				$(this).parent().find("span").html("<span class='am-text-success' ><i class='am-icon-check'></i>正确！</span>");
			}
		})

	})
</script>

</block>